<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
					<el-form-item>
						<el-button icon="plus"  type="primary" @click="onOpenAddMenu">{{$t('bar.add')}}</el-button>
						<el-button type="success" icon="upload" @click="importFormDialogRef.openAddDialog()">
							{{ $t('common.importBtn') }}</el-button>
							<el-button type="success" icon="Download" plain @click="exportCard">
							{{ $t('common.exportBtn') }}
						</el-button>
					</el-form-item>
					<el-form-item :label="$t('bar.printer')" prop="printer">
						<el-select v-model="PrinterName" placeholder="Select" style="width: 160px" >
							<el-option :key="ds.id" :label="ds.value" :value="ds.value" v-for="ds in printerOptions"></el-option>
						</el-select>
						<el-button type="info" plain icon="Printer" @click="print">
						<!--{{$t('bar.print')}}-->
						</el-button>
					</el-form-item>
					<el-form-item :label="$t('bar.materialcode')">
						<el-input v-model="state.queryForm.materialcode" clearable
							:placeholder="$t('bar.materialcode')" />
					</el-form-item>
					<el-form-item :label="$t('bar.createdate')" prop="createdate">
						<div class="block">
							<el-date-picker
								v-model="state.queryForm.createdate"
								clearable
								type="daterange"
								unlink-panels
								range-separator="To"
								start-placeholder="Start date"
								end-placeholder="End date"
								:shortcuts="shortcuts"
							/>
						</div>
					</el-form-item>
					<el-form-item :label="$t('bar.spCard')">
						<el-input v-model="state.queryForm.barcode" clearable
							:placeholder="$t('bar.spCard')" />
					</el-form-item>
					<el-form-item :label="$t('bar.locationcode')">
						<el-input v-model="state.queryForm.locationCode" clearable
							:placeholder="$t('bar.locationcode')" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="search"  @click="query">{{$t('bar.search')}}</el-button>
						<el-button  icon="refresh"  @click="resetQuery">{{$t('bar.reset')}}</el-button>
					</el-form-item>
				</el-form>

				<el-table
					:data="state.dataList"
					highlight-current-row
					v-loading="state.loading"
					border
					style="width: 100%; height: 100%"
					:cell-style="tableStyle.cellStyle"
					stripe
					:header-cell-style="tableStyle.headerCellStyle"
					ref="tableRef"
				>
					<el-table-column type="selection" width="40" align="center" />
					<el-table-column type="index" label="#" width="80" />
					<el-table-column prop="barcode" :label="$t('bar.spBarcode')" show-overflow-tooltip />
					<el-table-column prop="materialCode" :label="$t('bar.materialcode')" show-overflow-tooltip />
					<el-table-column prop="materialName" :label="$t('bar.materialname')" show-overflow-tooltip />
					<el-table-column prop="materialSpec" :label="$t('bar.materialspec')" show-overflow-tooltip />
					<el-table-column prop="warehouseCode" :label="$t('bar.warehousecode')" show-overflow-tooltip />
					<el-table-column prop="locationCode" :label="$t('bar.locationcode')" show-overflow-tooltip />
					<el-table-column prop="currentQty" :label="$t('bar.currentqty')" show-overflow-tooltip />
					<el-table-column prop="remark" :label="$t('bar.remark')"  show-overflow-tooltip width="200"/>
					<el-table-column prop="createUserName" :label="$t('bar.createUserName')"  show-overflow-tooltip />
					<el-table-column prop="creationTime" :label="$t('bar.createdate')"  show-overflow-tooltip width="200" />
				</el-table>

				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
		<MenuDialog @refresh="getDataList" ref="menuDialogRef"/>
		<upload-excel
        ref="excelUploadRef"
        :title="$t('bar.importSp')"
        temp-url="/admin/sys-file/local/file/user.xlsx"
        url="/admin/user/import"
        @refreshDataList="getDataList"
    />
	<importForm ref="importFormDialogRef" @getChildren="oncFun"/>
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getPrinter, queryBarcode,barcodePrint } from '/@/api/platform/wms/sp';
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
const importForm = defineAsyncComponent(() => import('./importForm.vue'));
const importFormDialogRef = ref()
const getYMD = (date:any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const excelUploadRef = ref();
const tableRef = ref();
const today = new Date();
const endDate = new Date(today);
//endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
//today.setDate(today.getDate() + 1);
const createdate = ref();
const PrinterName=ref('');
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];


// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		barcodeTypeCode: ["hardwareMaterial"],
		createdate:createdate,
		CreateDateStart:createdate.value ? getYMD(createdate.value[0]) : '',
		CreateDateEnd:createdate.value ? getYMD(createdate.value[1]) : ''
	},
	pageList: queryBarcode,
});
//打印机列表
const printerOptions = ref();
// 初始化数据
onMounted(() => {
	getPrinter({code:"printerSetup", text:""}).then((res) => {
	printerOptions.value = res.data;
  });
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle,downBlobFile } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	//重置打印机
	PrinterName.value='';
	state.queryForm.CreateDateStart = createdate.value ? getYMD(createdate.value[0]) : '';
	state.queryForm.CreateDateEnd = createdate.value ? getYMD(createdate.value[1]) : '';
	getDataList(false);
};
const query = () => {

	//if (!createdate.value || !createdate.value[0]) {
		//ElMessage.error(t('bar.createdate')+t('bar.cannotEmpty')); // 使用Element Plus的message组件提示用户
		//return; // 如果开始时间未选，则不继续执行后续逻辑
	//}
	state.queryForm.CreateDateStart = createdate.value ? getYMD(createdate.value[0]) : '';
	state.queryForm.CreateDateEnd = createdate.value ? getYMD(createdate.value[1]) : '';
	getDataList();
};
const print=()=>{
	const selectedAry = tableRef.value.getSelectionRows();
	if(!PrinterName.value){
		ElMessage.error(t('bar.selectPrinter')); 
		return;
	}
	if(selectedAry.length==0){
		ElMessage.error(t('bar.selectBarcodes')); 
		return;
	}
	selectedAry.forEach(element => {
		barcodePrint({"barcode":element.barcode,"printerName":PrinterName.value,"operatePage":"WJBarcode"}).then((res)=>{
		
		});
	});
	
}
const oncFun= (x:any) => {
    getDataList()
}
const exportCard=()=>{
	downBlobFile('/wms/spcard/ExportSpcard',{"StartDate":state.queryForm.CreateDateStart,"EndDate":state.queryForm.CreateDateEnd},'HardwareCard.xlsx');
}
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = (type?: string, row?: any) => {
  menuDialogRef.value.openDialog(type, row);
};
</script>